<template>
    <view class="content">
        <view class="bg"></view>
        <view class="top-img">
            <!-- <image src="../static/image/r1.png" class="r-img"></image> -->
            <image src="../static/image/r2.png" class="r-img"></image>
            <!-- <image src="../static/image/r3.png" class="r-img"></image> -->
        </view>
        
        <view class="box">
            <view class="title">信息完善</view>
            <view class="item">
                <view class="grey">姓名</view>
                <view class="item-right">
                    <input type="text" v-model="name" placeholder="请输入姓名" class="inp">
                </view>
            </view>
            <view class="item">
                <view class="grey">车牌号</view>
                <view class="item-right">
                    <input type="text" v-model="number" placeholder="请输入车牌号" class="inp">
                </view>
            </view>
            <view class="item">
                <view class="grey">车辆类型</view>
                <view class="item-right" @click="show_1 = true">
                    <input type="text" v-model="vehicle" placeholder="请选择车辆类型" class="inp" disabled>
					<u-icon name="arrow-down-fill" color="#656565" size="24" class="u-m-l-10"></u-icon>
                </view>
            </view>
			<view class="item">
			    <view class="grey">车长</view>
			    <view class="item-right" @click="show_2 = true">
			        <input type="digit" v-model="length" placeholder="请选择车长" class="inp" disabled>
			        <!-- <text class="u-p-l-10 text-bold">米</text> -->
					<u-icon name="arrow-down-fill" color="#656565" size="24" class="u-m-l-10"></u-icon>
			    </view>
			</view>
            <view class="item">
                <view class="grey">载重</view>
                <view class="item-right" @click="show_3 = true">
                    <input type="digit" v-model="load" placeholder="请选择载重" class="inp" disabled>
                    <!-- <text class="u-p-l-10 text-bold">吨</text> -->
					<u-icon name="arrow-down-fill" color="#656565" size="24" class="u-m-l-10"></u-icon>
                </view>
            </view>
            <view class="item">
                <view class="grey">驾龄</view>
                <view class="item-right">
                    <input type="digit" v-model="age" placeholder="请输入驾龄" class="inp">
                </view>
            </view>
            <view class="item">
                <view class="grey">联系方式</view>
                <view class="item-right">
                    <input type="number" v-model="phone" maxlength="11" placeholder="请输入联系方式" class="inp">
                </view>
            </view>
            <view class="item">
                <view class="grey">紧急联系人电话</view>
                <view class="item-right">
                    <input type="number" v-model="contact_phone" maxlength="11" placeholder="请输入紧急联系人电话" class="inp">
                </view>
            </view>
        </view>
        
        <view class="btn" v-if="info.status != 1" @click="$noMultipleClicks(next)">提交</view>
		
		<!-- 车辆类型 -->
		<u-select v-model="show_1" mode="single-column" :list="select.vehicle" value-name="id" label-name="name" @confirm="confirm($event, 1)"></u-select>
		<!-- 车长 -->
		<u-select v-model="show_2" mode="single-column" :list="select.length" value-name="id" label-name="name" @confirm="confirm($event, 2)"></u-select>
		<!-- 载重 -->
		<u-select v-model="show_3" mode="single-column" :list="select.load" value-name="id" label-name="name" @confirm="confirm($event, 3)"></u-select>
    </view>
</template>

<script>
    export default {
        data() {
            return {
				noClick: true,//连点
                data: {},
				show_1: false,
				show_2: false,
				show_3: false,
				select: {},
				name: '',
				number: '',//车牌号
				vehicle_id: '',//车辆类型id
				vehicle: '',
				length_id: '',//车长id
				length: '',
				load_id: '',//载重id
				load: '',
				age: '',//驾龄
				phone: '',//联系方式
				contact_phone: '',//紧急联系方式
				info: {},
            };
        },
        onLoad(option) {
			if (option.data) {
				this.data = JSON.parse(decodeURIComponent(option.data));
				console.log(this.data)
			}
            this.getSelect()
			this.getInfo()
        },
        methods: {
			getInfo() {
			    this.$ajax('driver_detail', {
			        user_token: this.$getSync('userToken'),
			    }).then(ret => {
			        if (ret.success == 1000) {
						this.info = ret.detail
						if (this.info && this.info.status == 2 || this.info.status == 3) {
							this.name = this.info.name
							this.number = this.info.number
							this.vehicle_id = this.info.vehicle_id
							this.vehicle = this.info.vehicle
							this.length_id = this.info.length_id
							this.length = this.info.length
							this.load_id = this.info.load_id
							this.load = this.info.load
							this.age = this.info.age
							this.phone = this.info.phone
							this.contact_phone = this.info.contact_phone
						}
			        } else {
			            this.$toast(ret.msg);
			        }
			    });
			},
			
            // 下一步
            next() {
				if (!this.name) {
					this.$toast('请输入姓名')
					return
				}
				if (!this.number) {
					this.$toast('请输入车牌号')
					return
				}
				if (!this.vehicle_id) {
					this.$toast('请选择车辆类型')
					return
				}
				if (!this.length_id) {
					this.$toast('请选择车长')
					return
				}
				if (!this.load_id) {
					this.$toast('请选择载重')
					return
				}
				if (!this.age) {
					this.$toast('请输入驾龄')
					return
				}
				if (!this.phone) {
					this.$toast('请输入联系方式')
					return
				}
				if(!this.$checkPhone(this.phone)){
					this.$toast('请输入正确的联系方式')
					return
				}
				if (!this.contact_phone) {
					this.$toast('请输入紧急联系方式')
					return
				}
				if(!this.$checkPhone(this.contact_phone)){
					this.$toast('请输入正确的紧急联系方式')
					return
				}
				
				this.$ajax('driver_register', {
				    user_token: this.$getSync('userToken'),
					front_id: this.data.front_id,//身份证正面id
					back_id: this.data.back_id,//身份证背面id
					travel_front_id: this.data.travel_front_id,//行驶证正面图片id
					travel_back_id: this.data.travel_back_id,//行驶证背面图片id
					drive_id: this.data.drive_id,//驾驶证图片id
					appearance_id: this.data.appearance_id,//车辆外观图片id
					name: this.name,//姓名
					number: this.number,//车牌号
					vehicle_id: this.vehicle_id,//车辆类型id
					length_id: this.length_id,//车长id
					load_id: this.load_id,//载重id
					age: this.age,//驾龄
					phone: this.phone,//联系方式
					contact_phone: this.contact_phone,//紧急联系方式
				}).then(ret => {
				    if (ret.success == 1000) {
						this.$cTo(`/pagesA/apply/apply-3`)
				    } else {
				        this.$toast(ret.msg);
				    }
				});
            },
			
			confirm(e, num) {
				console.log(e);
				if (num == 1) {
					this.vehicle = e[0].label //车辆类型id
					this.vehicle_id = e[0].value
				} else if (num == 2) {
					this.length = e[0].label //车长id
					this.length_id = e[0].value
				} else if (num == 3) {
					this.load = e[0].label //载重id
					this.load_id = e[0].value
				}
			},
			
			getSelect() {
			    this.$ajax('select_driver_option', {
			        user_token: this.$getSync('userToken'),
			    }).then(ret => {
			        if (ret.success == 1000) {
						this.select = ret.detail
			        } else {
			            this.$toast(ret.msg);
			        }
			    });
			},
        }
    };
</script>

<style lang="scss">
    
    
    page{
        background-color: #f2f4fa;
    }
    .content {
    	padding: 30rpx 20rpx;
    }
    .bg {
    	width: 100%;
    	height: 600rpx;
    	position: absolute;
    	top: 0;
    	left: 0;
    	z-index: -1;
        background: linear-gradient(to bottom, #004580,#18568c, #f2f4fa);
    }
    .top-img{
        padding: 10rpx 0 40rpx;
    }
    .r-img{
        width: 538rpx;
        height: 70rpx;
        margin: auto;
    }
    
    .box{
        padding: 30rpx 30rpx 10rpx;
        background-color: #fff;
        border-radius: 20rpx;
        margin-bottom: 20rpx;
    }
    .title{
        font-size: 34rpx;
        font-weight: bold;
        padding-bottom: 10rpx;
    }
    .img-box{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 55rpx;
    }
    .img{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .s-up{
        width: 305rpx;
        height: 193rpx;
    }
    .tip{
        font-size: 24rpx;
        color: #a4a4a4;
        padding-top: 25rpx;
    }
    .btn{
        font-size: 34rpx;
        color: #fff;
        text-align: center;
        padding: 25rpx;
        background-color: #00457f;
        border-radius: 50rpx;
        margin-top: 50rpx;
    }
    
    .item{
        padding: 30rpx 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .item-right{
        flex: 1;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        padding-left: 15rpx;
    }
    .inp{
        flex: 1;
        text-align: right;
    }
    .grey{
        color: #656565;
    }

</style>
